<template>
  <div class="header header-bar" style="height: 66px; transform: translateX(0px); opacity: 1;">
    <a  class="header__logo--cut" ><img src="../assets/icon_xh_logo.png"></a>
    
    
    
    <div class="header__navwrap">
        <div class="header__navbar">
            <!-- <a class="header__navitem header__navitem--focus" style="height: 66px; line-height: 66px;" v-for="(nav,index) in navlist" :key="index">{{ nav }}</a> -->
        
        </div>
        
    </div>

    <div class="search">
        <div class="search-input">
        <!-- <el-input
        placeholder="请输入内容"
        v-model="input"
        clearable>
        
        </el-input> -->
        
        </div>

        <!-- <div class="search-btn"><i class="fa fa-search fa-2x"></i></div> -->
    </div>

    <div class="header__right">
        <div class="header__login">
            <button class="login__btn"  @click="drawer = true">
                
                <el-popover class="my-popover"
                    placement="bottom"
                    width="150"
                    trigger="hover">
                    <i class="fa fa-bullhorn fa-2x" slot="reference"><span class="i-new" v-show="isShow">新</span></i>
                    <!-- todo -->
                    <div style="border-bottom: 1px solid rgb(235, 238, 245)" v-for="(item) in messageData" :key="item.messageId">
                        <a  @click="changeXin(item)">
                        <el-link :href="item.location" :underline="false" style="margin-top:30px;">
                        {{ item.title }}
                        <div class="new" v-show="item.isRead !== 'Y'">新</div>
                        </el-link>
                        </a>
                    </div>

                
                </el-popover>
                </button>
            <!-- todo -->
            <div class="login__btn">
                <i class="fa fa-user-o"></i>
<el-popover class="my-popover"
  placement="bottom"
  width="150"
  trigger="hover">
  <!-- todo -->
    <div style="border-bottom: 1px solid rgb(235, 238, 245)" v-for="(item,index) in identityChangeData" :key="index">
        <el-link :href="item.location" :underline="false" style="margin-top:30px;">{{item.skillName}}</el-link>
    
    </div>
  
  <el-button class="my-button" slot="reference">{{ username }}</el-button>
</el-popover>
            
            </div>
        </div>
    </div>

    
  </div>
</template>

<script>
import axios from 'axios';


export default {
    
    data() {
        return {
            // 消息图标的“新”
            isShow: false,
            messageData: [],
            drawer: false,
            // navlist:['首页',"wjj","zzh","ylh"],
            input: '',
            

            
        }
    },
    props:[
        'identityChangeData','username'
    ],
    methods:{
        isShowXin(){
            console.log(123);
            this.messageData.forEach(element => {
                
                if(element.isRead === "\u0000"){
                    this.isShow = true
                }
            });
        },
        changeXin(item){
            
            let flag

            this.messageData.forEach(element=>{
                if(element.messageId === item.messageId)
                    element.isRead = 'Y'
                    
            })

            

            this.messageData.forEach(element=>{
                    
                
                if(element.isRead === '\u0000')
                        flag = true
                
                
            })
            if(flag===true)
                this.isShow=true
            else
                this.isShow=false

        }
        
    },
    
        
        
    

    created(){
        let id
        // 发送username,请求消息列表
        if(this.$route.query.identity === 'student')
             id = JSON.parse(localStorage.getItem('data')).studentId
        else if(this.$route.query.identity === 'teacher')
             id = JSON.parse(localStorage.getItem('data')).tnub

        console.log(id);

        axios.post(`/prod-api/message/getOneAllMessage`,{recipientId:id})
            .then(response=>{
                this.messageData = response.data
                
                this.messageData.forEach(element=>{
                    
                    element['location'] = `/#/${this.$route.query.identity}/message/` + `${element.messageId}`
                    
                    
                })
                console.log(this.messageData);
                this.isShowXin()
                
            }).catch(error=>{
                this.$router.push({path: '/error', params:{error:error}})
            })

        

        

        
    }

    
}
</script>

<style>
a {
    text-decoration: none;
}
html {
    font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
    font-size: 14px;
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.header__logo--cut{
    opacity: 1;
    width: 15%;
    height: 65px;
    /* margin: 5px 10px; */
}
.header__logo--cut  img {
    width: 100%;
    height: 100%;
}
.header {
    position: fixed;
    z-index: 999;
    width: 100%;
    min-width: 1280px;
    height: 66px;
    background-color: rgba(17,17,17,0.75);
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.35);
    transition: height 0.8s ease-out;
}

.header .search{
    position: absolute;
    left: 57%;
}

.header-bar {
    display: flex;
    flex-shrink: 1;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    transform: translateZ(0);
    transition: opacity 0.5s ease-out;
}
.header__navwrap {
    display: inline-block;
    position: relative;
    width: 750px;
    margin-left: -34px;
    width: auto;
}
.header__navitem {
    margin: 0 17px !important;
}
.header__navbar {
    display: inline-block;
    list-style-type: none;
    padding-right: 10px;
    margin-left: 90px;
}
.header__right {
    position: absolute;
    right: 30px;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
}
.header__cs {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.header__login {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
    height: 100%;
}
.header__login .login__btn {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 0;
    outline: none;
    background: none;
    font-size: 17px;
    color: #ccc;
    cursor: pointer;
}
.header__navitem {
    position: relative;
    float: left;
    width: auto;
    height: 66px;
    margin: 0 30px !important;
    line-height: 66px;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ccc;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
}
.header__navitem:hover {
    text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
    color: #fff;
}
.header__login {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
    height: 100%;
}
.login__btn:hover{
    text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
}

.search div{
    float: left;

}
.search-input{
    
    margin: 13px 0 13px 8px;
}
.search-btn{
    width: 50px;
    height: 50px;
    margin: 10px;
}
.fa-search{
    margin-top: 8px;
    color: #ccc;
}
.login__btn {
    margin-left: 8px;
}
.my-button{
    background-color: transparent ;
    color: #ccc;
    border: none;
    
}
.my-button:hover{
    text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
    background-color: transparent;
}

.el-link{
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
}
.new{
    float: right ;
    margin-left: 5px;
    color: red;
    font-size: 10px;
    
}
.i-new{
    float: right ;
    margin-left: 5px;
    color: red;
    font-size: 10px;
    
}
</style>